<template>
  <div class="text-center m-2 flex flex-col file-item relative" @dblclick="selectItem">
    <div class="border p-2 h-[120px] inline-flex self-center overflow-hidden">
      <XImage v-if="item.type === '0'" :height="120" :src="item.uri"></XImage>
      <video
        v-else-if="item.type === '1'"
        :key="item.uri"
        controls
        class="w-[100%]"
        :src="item.uri"
        style="object-fit: contain"
        controlslist="nodownload"
        :poster="item.cover"
      ></video>
    </div>
    <div class="filename text-center mt-4">{{ item.name }}</div>
    <div class="absolute bottom-[-2rem] left-0 actions" v-if="actions">
      <slot>
        <a-button size="small" type="ghost" class="text-blue-500" @click="onEdit">
          <EditOutlined />
        </a-button>
        <a-button size="small" type="ghost" class="text-red-500" @click="onDelete">
          <DeleteOutlined />
        </a-button>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Library } from '@/api/modules/data/library';
import { CheckOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  item: Library;
  actions?: boolean;
}>();

const emit = defineEmits(['onSelect', 'onEdit', 'onDelete']);
const selectItem = () => {
  emit('onSelect', props.item);
};
const onEdit = () => {
  emit('onEdit', props.item);
};
const onDelete = () => {
  emit('onDelete', props.item);
};
</script>

<style lang="scss" scoped>
.filename {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  text-align: center;
}
.border {
  border-radius: var(--radius);
}
.file-item {
  &:hover {
    .actions {
      opacity: 1;
    }
  }
}
.actions {
  width: 100%;
  height: fit-content;
  opacity: 0;
}
</style>
